<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-page-header style="padding-left: 0" title="返回" @back="() => $router.go(-1)" />
    <a-descriptions title="">
      <a-descriptions-item label="唯一码" :span="3">
        {{ infos.uniCode }}
      </a-descriptions-item>
      <a-descriptions-item label="昵称" :span="3">
        {{ infos.userName }}
      </a-descriptions-item>
      <a-descriptions-item label="姓名" :span="3">
        {{ infos.realName }}
      </a-descriptions-item>
      <a-descriptions-item label="手机号" :span="3">
        {{ infos.phone }}
      </a-descriptions-item>
      <a-descriptions-item label="头像" :span="3">
        <img :src="infos.headImg" v-if="infos.headImg" style="max-height: 100px" />
      </a-descriptions-item>
      <a-descriptions-item label="学校" :span="3">
        {{ infos.universityName }}
      </a-descriptions-item>
      <!-- <a-descriptions-item label="年级" :span="3">
        {{ infos.grade }}
      </a-descriptions-item> -->
      <a-descriptions-item label="入学年份" :span="3">
        {{ infos.year }}
      </a-descriptions-item>
      <a-descriptions-item label="院系" :span="3">
        {{ infos.major }}
      </a-descriptions-item>
      <a-descriptions-item label="总积分" :span="3">
        {{ infos.totalCredit }}
      </a-descriptions-item>
      <a-descriptions-item label="已助力积分" :span="3">
        {{ infos.donateCredit }}
      </a-descriptions-item>
      <a-descriptions-item label="可助力积分" :span="3">
        {{ infos.availCredit }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间" :span="3">
        {{ infos.createdAt }}
      </a-descriptions-item>
    </a-descriptions>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="积分明细">
        <integral-list></integral-list>
      </a-tab-pane>
      <a-tab-pane key="2" tab="地址列表">
        <address-list></address-list>
      </a-tab-pane>
      <a-tab-pane key="3" tab="捐赠列表">
        <donation-list></donation-list>
      </a-tab-pane>
      <a-tab-pane key="4" tab="答题列表">
        <answer-list></answer-list>
      </a-tab-pane>
    </a-tabs>
    <a-button @click="() => $router.go(-1)">取消</a-button>
  </a-card>
</template>

<script>
import IntegralList from './components/IntegralList'
const AddressList = () => import('./components/AddressList')
const DonationList = () => import('./components/DonationList')
const AnswerList = () => import('./components/AnswerList')

export default {
  name: 'UserDetail',
  components: {
    IntegralList,
    AddressList,
    DonationList,
    AnswerList
  },
  data() {
    return {
      id: this.$route.params.id || '',
      infos: {},
      labelCol: { lg: { span: 1 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      info: {}
    }
  },
  mounted() {
    // 获取信息
    this.formInit()
  },
  methods: {
    formInit() {
      // 获取信息
      this.getInfo()
    },
    // 编辑信息
    getInfo() {
      this.$common.handleGet('/users/' + this.id).then((res) => {
        if (res.code === 200) {
          const result = res.data
          this.infos = result
          this.info = {
            id: result.id,
            bodyStatus: 1
          }
        } else {
          this.$message.error(res.message)
          // 跳转到目的路由
          this.$router.push({ name: 'UserList' })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cover-img {
  max-height: 150px;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
  .img-item {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
